import React, {Component} from 'react';
import Child from "./components/Child";
import globalContext from "./context";
/*
* React.createContext()返回结果是React元素对象，有两个组件：
* Provider:提供者（提供数据）
* Consumer:消费者（使用数据）
* 实现跨组件传递参数，考虑两件事件即可。
* 如何传递？
*   // 1- 直接使用Provider
*   // value属性即是向下传递的数据
         <globalContext.Provider value={{userName:"zhangsan",age:12}}>
                <Child/>
         </globalContext.Provider>
         *
   // 2- 可以解构赋值
   *      <Provider value={{userName:"zhangsan",age:12}}>
                <Child/>
          </Provider>
* 如何接收？
*    // 1
*    <Consumer>{value=>{
*       // value即是提供者提供的数据
*    }}</Consumer>
*
*    // 2- 可以在类组件中定义一个静态属性：static contextType = globalContext;
*    //    this.context即是提供者提供的数据
* */
class App extends Component {
    state = {
        userName:"lisi",
        age:15
    }
    changeUserName(userName){
        this.setState({
            userName
        })
    }
    render() {
        const {Provider} = globalContext;
        // React.createContext()运行的结果：
        console.log(globalContext);
        // 1
        // return (
        //     <globalContext.Provider value={{userName:"zhangsan",age:12}}>
        //         <Child/>
        //     </globalContext.Provider>
        // );

        // 2
        return (
            <Provider value={{...this.state,changeUserName:this.changeUserName.bind(this)}}>
                <button onClick={()=>{
                    this.changeUserName(this.state.userName+"!")
                }}>App->userName</button>
                <Child/>
            </Provider>
        );
    }
}

export default App;